import React from 'react';
import { connect } from 'react-redux';

import ShowItem from './view/ShowTodo';
import AddTodo from './view/AddTodo';

import './assets/less/common.less';
import './assets/less/app.less';

import { addTodo, toogleTodo, deleteTodo } from './store/action/action';
class App extends React.Component {
	
	render() {
		
		const { dispatch, data, addTodo, toogleTodo, deleteTodo } = this.props;
		const completedItems = data.filter((item, i) => {
			item.index = i;
			return item.completed;
		})
		const uncompletedItems = data.filter((item, i) => {
			item.index = i;
			return !item.completed
		})
		return (
			<div className='app-body'>
				<AddTodo addTodo={addTodo} />
				<ShowItem items={uncompletedItems} title='未完成' onDelete={deleteTodo} toogleItem={toogleTodo} />
				<ShowItem items={completedItems} title='已完成' onDelete={deleteTodo} toogleItem={toogleTodo} />
			</div>
			
		)
	}
}

const mapStateToProps = (state) => {
	return {
		data: state.data
	}
}

const mapDispatchToProps = (dispatch) => ({
	addTodo: addTodo(dispatch),
	toogleTodo: toogleTodo(dispatch),
	deleteTodo: deleteTodo(dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(App);